<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/coupons.css" />


    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .modal-body{
          padding: 0
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="dialog">
            <div class="modal-head">
                <div class="">
                    领取优惠券
                </div>
                <img class="close-modal-img" src="../../image/common/guanbi.png" alt="" tapmode onclick="api.closeFrame()">
            </div>
            <div class="modal-body">

                <div class="coupons-item font-12 text-color-3 red-border">
                    <div class="flex-justify-between pink-bg">
                        <div class="flex-align-center">
                            <div class="price flex-center height-70">
                                <div class="price-center red-text">
                                    <span class="money-icon">¥</span>
                                    <span class="font-30">30</span></div>
                            </div>
                            <div class="">
                                <div class="">
                                    每满299减30券
                                </div>
                                <div class="time">
                                    2019.07.03-2019.07.05
                                </div>
                            </div>
                        </div>

                        <button class="red-btn font-12">领取</button>
                    </div>
                    <div class="text-content flex-justify-between">
                        <div class="">
                            全场通用·新品除外；限时购、特价等特惠商品，处…
                        </div>
                        <img class='zhankai-img' src="../../image/person/jinru.png" alt="">
                    </div>
                </div>
                <div class="coupons-item font-12 text-color-3 red-border">
                    <div class="flex-justify-between pink-bg">
                        <div class="flex-align-center">
                            <div class="price flex-center height-70">
                                <div class="price-center red-text">
                                    <span class="money-icon">¥</span>
                                    <span class="font-30">30</span></div>
                            </div>
                            <div class="">
                                <div class="">
                                    每满299减30券
                                </div>
                                <div class="time">
                                    2019.07.03-2019.07.05
                                </div>
                            </div>
                        </div>

                   <img class='zhang' src="../../image/index/geted-red-img.png" alt="">

                    </div>
                    <div class="text-content flex-justify-between">
                        <div class="">
                            全场通用·新品除外；限时购、特价等特惠商品，处…
                        </div>
                        <img class='zhankai-img' src="../../image/person/jinru.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            payConfirm: function() {
                api.openFrame({
                    name: 'pay-modal',
                    url: './pay-modal.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    },
                    bgColor: 'rgba(0,0,0,0.6)',
                    bounces: false
                })

            }
        }

    });
    $api.addCls(dialog, 'in');
    apiready = function() {
        // $(document.body).on('touchend', function(e) {
        //     var dialog = $("#dialog")[0];
        //     if (!$.contains(dialog, e.target)) {
        //         $('#dialog').removeClass('in');
        //         setTimeout(function() {
        //             api.closeFrame();
        //         }, 200);
        //     }
        // });
    };
</script>


</html>
